<script setup lang="ts">
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
import { ref } from 'vue'

const visible = ref<boolean>(false)
const visibleChange = () => {
  visible.value = !visible.value
}
</script>

<template>
  <div class="collapse-container">
    <div class="always-show">
      <div class="show-container">
        <slot />
      </div>
      <span class="expand">
        <el-icon v-if="!visible" @click="visibleChange"
          ><CaretBottom
        /></el-icon>
        <el-icon v-else @click="visibleChange"><CaretTop /></el-icon>
      </span>
    </div>

    <div class="collapse" v-if="visible">
      <slot name="collapse"></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.collapse-container {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 40px;

  .always-show {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .show-container {
      width: calc(100% - 50px);
    }

    .expand {
      width: 50px;
      text-align: center;
      cursor: pointer;
    }
  }

  .collapse {
    box-sizing: border-box;
    height: max-content;
    padding: 20px 54px;
  }
}
</style>
